<script setup lang="ts">
import {ref} from "vue";
import AtguiguInput from './AtguiguInput.vue'
// 数据
let username = ref('zhansgan')
let password = ref('123456')
</script>

<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- v-model用在html标签上 -->
<!--    <input type="text" v-model="username">-->
<!--    <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">-->

    <!-- v-model用在组件标签上 -->
<!--    <AtguiguInput v-model="username"/>-->
    <!-- <AtguiguInput :modelValue="username"  @update:modelValue="username = $event"  /> -->

    <!-- 修改modelValue -->
    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
  </div>
</template>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
